<template>
    <ul class="wioc-location-list">
        <li ref="child" :class="[checkedList.indexOf(item)!=-1?'active':'']" :key="'loc'+index" v-for="(item,index) in datalist" @click.stop="select(item)">
            <h3>
				<span>
					<svg ref="down" class="icon icon-svg" aria-hidden="true" @click.stop="down(index)">
					  <use xlink:href="#icon-up"></use>
					</svg>
				</span>
			   {{item.name}}
			</h3>
            <h4 ref="text" style="display: none;">{{item.address}}</h4>
        </li>
    </ul>
</template>


<script>
    export default {
        name:"wioc-location-list",
        components:{

        },
        data(){
            return{
                active:false,
                checkedList:[],
            }
        },
        props:{
			mulCheck: {
				type: Boolean,
				default: false
			},
			datalist:{
				type: Array
			}
        },
        methods:{
            select(item){
				if(this.mulCheck){
					// 多选
					if(this.checkedList.indexOf(item)!=-1){
					    this.checkedList.splice(this.checkedList.indexOf(item),1)
					}else{
					    this.checkedList.push(item)
					}
				}else{
					 this.$set(this.checkedList, 0, item);				
				}
                this.$emit('checkedList',this.checkedList)
            },
			down(index){
				if(this.$refs.text[index].style.display=='none'){
					this.$refs.text[index].style.display='flex'
					this.$refs.text[index].classList.add('view')
					this.$refs.down[index].style.transform = 'rotateX(0deg)'
				}else{
					this.$refs.text[index].style.display='none'
					this.$refs.text[index].classList.remove('view')
					this.$refs.down[index].style.transform = 'rotateX(180deg)'
				}
			}
        }
    }

</script>

<style  lang="less" scoped>
    .wioc-location-list{
        li{
            background: #fff;
            box-shadow: 0 -0.02rem 0.05rem #f8f8f8;
            margin-bottom: 8px;
            padding:0.03rem 0.28rem 0 0.15rem;
            border-radius: 10px;
            position:relative;
            transition: all 0.2s;
			cursor: pointer;
			span{
				.icon-svg{
				    display: inline-flex;
				    width: 0.1rem;
				    height:0.1rem;
				    line-height: 0.22rem;
				    transform: rotateX(180deg);
					fill: #595959;
				}
			}
            h3,h4{margin: 0;padding: 0}
            h3{
                font-size: 0.13rem;
                line-height: 0.4rem;
                font-weight: normal;
                color:#595959;
                padding-left: 5%;
            }
            h4{
				display: none;
                width: 80%;
                text-overflow: ellipsis;
                overflow: hidden;
                font-size:0.11rem;
                line-height: 0.22rem;
                font-weight: normal;
                margin-top: -0.1rem;
                color: #969696;
                padding-left: 5%;
				transition: all 0.5s ease;
				&.view{
					animation: show 0.2s ease;
					@keyframes show{
					    0%{
					        height:0
					    }
					    90%{
					        height:0.2rem
					    }
					    100%{
					        height:auto
					    }
					}
				}
				
            }
            &.active{
                h3,h4,{
                    color:#4ba0f3;
                }
				span .icon-svg{
					fill: #4ba0f3;
				}
				
                &:after{
                    display: block;
                    position:absolute;
                    top:50%;
                    transform: translateY(-50%);
                    right:0.1rem;
                    width: 0.16rem;
                    height:0.16rem;
                    vertical-align: middle;
                    background-image:url();
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    content: "";
                }
            }
            
        }

    }
</style>
